<template>
    <el-menu style="height: 100%;" :default-openeds="[]">
        <div v-for="(item,index) in list">
            <el-submenu :index="index + ''" v-if="item.children != null">
                <template slot="title">
                    <!--                <i class="el-icon-message"></i>-->
                    {{item.title}}</template>
                <div v-for="(v,i) in item.children">
                    <el-menu-item v-if="v.children == null" :index="index + '-' + i"> {{v.title}}</el-menu-item>
                    <SecondMenu v-else :list="[v]"></SecondMenu>

                </div>

            </el-submenu>
            <el-menu-item :index="index + ''" v-else>
                <i class="el-icon-menu"></i>
                <span slot="title">{{item.title}}</span>
            </el-menu-item>
        </div>

    </el-menu>
</template>
<script>
    import eventHub from "../../../utils/eventHub";
    import SecondMenu from "./SecondMenu";
    export default {
        props:{
            list:Array
        },
        components:{
            SecondMenu,
        },
        methods: {
            handleClick (){
                console.log(222)
                let params = "dsa"
                eventHub.$emit("change", params)
            }
        }
    }

</script>
<style scoped>
    .about{

    }
</style>
